import Nav from '../../src/components/common/nav/nav.vue'
import {ApiUrl,Islogined,returnId,show,hide} from './ApiUrl.js'
import loading from '../../src/components/common/loading/loading.vue'
import fangerror from '../../src/components/common/fangerror/fangerror.vue'
import Swiper from '../plugins/swiper4x/swiper.min'
import {timerScale} from '../plugins/scale/self_adaption_scale'
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
require("./lib/select2/js/select2.min");
export default {
  components: {
    meun:Nav,loading,fangerror,
  },
  data(){
    return {
      FangLoading:false,//Loading控制，true显示，false不显示
      fangerroring:false,//提示文本弹窗，true显示，false不显示
      fangerrorText:'',//提示文本弹窗内容
      htmlTitle:'我的指标特征',
      specificNum:'38',
      specificUnit:'km',
      locationInfo:'广州市-市区',
      specififMode:'明挖车站',
      moreInfo:'默认运距 | 地下车站 1-3层 | 二类土质 | 抗震等级 3级 | 山体平整',
      QuerybyspecialtycodendexName:'',//弹窗标题
      IndexAttrList:[],//特征属性列表
      imgUrl:'./static/images/',
      imgPng:'.png',
      attrsubscriptionListPage:1,//主列表页码数
      specialtyCode:null,//主列表专业类型编号
      industryCode:null,//专业类型
      indexType:null,//专业类型
      svaespecialtyCode:'',//保存特征专业
      specialtyindex:'',//专业下标
      kw:'',
      noData:'',
      indexName:'',
      headerTitle:'Jacob全都有的车站特征 &gt;',
      //专业分类
      majorSwiperList:[
        {indexName:""},
      ],
      //主材特征列表
      indexattrsubscriptionList:[],
      industryCodeWindList:[],
      dataQuerybyspecialtycodeList:[],
    }
  },
  created: function() {
    this.svaespecialtyCode = this.$route.query.specialtyCode
  },
  mounted(){
    timerScale();
    let _This = this;

    let windowH = $(window).height();
    let meunBoxH = $('.meunBox').outerHeight(true);
    let megessBoxH = $('.megessBox').outerHeight(true);
    $('.contentLeft,.contentRight').height( windowH - meunBoxH - megessBoxH );
    $('.tabContentBox').height(windowH - meunBoxH);
    this.specialtyindex = this.$route.query.index;
    /*swiper配置js*/
    this.majorSwiper('03',true,null,1,10,function (data) {
      _This.majorSwiperList = data;
      _This.indexName = data[0].indexName
      _This.$nextTick(() =>{
        //默认选择第一个分类
        let dataindexattr = {
          specialtyCode:_This.svaespecialtyCode,
          indexType:null,
          page:1,
          pageSize:10,
          category:null,
          kw:null
        }
        _This.indexattrsubscription(dataindexattr,function (dataindexattrData) {
          _This.indexattrsubscriptionList = dataindexattrData;
        });
      })
      setTimeout(() => {
        var swiper = new Swiper('.swiper-container-major', {
          slidesPerView: 'auto',
          spaceBetween: 10,
          initialSlide:_This.specialtyindex,
        });
      }, 20)
    });
  },
  methods:{
    setTimeoutError:function () {
      setTimeout(() => {
        $('.Fang_errorBox').hide()
        this.fangerroring = false
      }, 2000)
    },
    show:function(target){
      let _This = this;
      /*
      * specialtyCode	是	string	专业编码
        indexCode	否	string	指标编码
      * */
      let IndexCategorySubStatus = {
        specialtyCode:_This.svaespecialtyCode,
        indexCode:''
      }
      this.getIndexCategorySubStatus(IndexCategorySubStatus,function (data) {
        if(data.status){
          show(target);
          _This.getIndexAttrList(_This.svaespecialtyCode,1,10,function(data){
            _This.IndexAttrList = data;
            _This.$nextTick(()=>{
              $('.select2-dropdown').remove();
              $('select').select2({
                language: "zh-CN",
              });
              $('.crosswise-select-choose .select2-container').width($('.crosswise-select-choose li:first').outerWidth(true) - 6);
            })
          })
        }else {
          show('#zhibiao_pop');
        }
      })
    },
    hide:function(target){
      hide(target);
    },
    BindBoxWrapHide(){
      $('#zhibiao_pop').show();
      this.$refs.BoxWrapHide.style = 'display:none;'
    },
    //您的第一个指标列表 -- 选中Iocn样式改变
    bindClickIschooseIcon:function(e,specialtyCode,indexType,industryCode){
      let _This = this;
      _This.SavepageList.saveindexpage = 1;
      _This.specialtyindexType = indexType;
      _This.SavepageList.specialtyCode = specialtyCode;
      _This.$refs.SaveIndexlist.scrollTo(0,0,false);
      _This.$refs.SaveIndexlist.finishInfinite(false);
      localStorage.setItem('FangUpadateIndexSorting',industryCode);
      _This.getquerybyspecialtycodeList(specialtyCode,3,true,1,10,function (data) {
        _This.dataQuerybyspecialtycodeList = data;
      });
      let eT = e.currentTarget;
      let childDom  = eT.parentNode.children;
      let ListParent = eT.parentNode.parentNode.parentNode.children[4].children[0].children[0].children[0].children;
      console.log(eT.parentNode.parentNode.parentNode.children[4].children[0].children[0].children[0].children);
      for(let i = 0;i < childDom.length;i++){
        childDom[i].classList.remove('chooseIconActive');//先删除所有含有active 类名
      }
      for (let i = 0; i < ListParent.length; i++){
        ListParent[i].children[0].children[2].classList.remove('cur');
      }
      eT.classList.add('chooseIconActive');//单独添加active 类名
      ListParent[0].children[0].children[2].classList.add('cur');
    },
    //请操作您的第一个指标列表 选择--是否选中
    chooseNorm:function (e) {
      /*item.choose = !item.choose*/
      let eT = e.currentTarget;
      /*console.log(eT)*/
      let LiClassLe = eT.classList;
      let IsLiHasClass = eT.classList[LiClassLe.length-1]
      let ClassL = eT.children[0].children[2].classList;
      let IsHasClass = eT.children[0].children[2].classList[ClassL.length-1];
      eT.firstChild.childNodes[4].classList.add('cur');
      eT.classList.add('cur');//整个LI的添加cur类
      if(IsHasClass == 'cur'){
        eT.firstChild.childNodes[4].classList.remove('cur');
      }
      if(IsLiHasClass == 'cur'){
        eT.classList.remove('cur');
      }
    },
    //第一个弹窗上拉加载更多数据 -- 设置指标
    SaveIndexinfinite(done) {
      let _This = this;
      /*if(this.noData) {
        setTimeout(() => {
          _This.$refs.SaveIndexlist.finishInfinite(2);
        })
        return;
      }*/
      /* SavepageList:{saveindexpage:1,savefeaturepage:1},//弹窗设置page 页码数*/
      /*_This.SavepageList.specialtyCode = data[0].specialtyCode;*/
      setTimeout(() => {
        _This.$nextTick(()=>{
          if(_This.totalCount.dataQuerybyspecialtycodeList > 10){
            _This.getquerybyspecialtycodeList( _This.SavepageList.specialtyCode,3,true, _This.SavepageList.saveindexpage,10,function (data) {
              if(data=='' || data == null){
                done(true);//没有更多数据
              }else {
                _This.SavepageList.saveindexpage =   _This.SavepageList.saveindexpage + 1;
                done();
              }
              if(_This.dataQuerybyspecialtycodeList == ''){
                _This.dataQuerybyspecialtycodeList = data;
              }else {
                for(let key in data){
                  _This.dataQuerybyspecialtycodeList.push(data[key]);
                }
                // console.log(_This.dataQuerybyspecialtycodeList)
              }
            });
          }
        })
      }, 500)
      //回调选中数据 specialtyCode,indexType,parent,page,pageSize,fn

    },
    returnUp: function(){
      this.$router.back(-1);
    },
    //返回
    back:function () {
      this.$router.back(-1);
    },
    /* 专业 */
    /*
    * industryCode	false	string	03 轨道工程，02 运营类，01房产类
      subStatus	false	boolean	是否需要查看用户关注状态
      indexType	false	int	1 单项经济指标,2 专业经济指标,3 分部经济指标 ,4 其它费用经济指标,5工程量技术,6 材料消耗量
      page	true	int	页码
      pageSize	true	int	页面大小
    * */
    majorSwiper:function (industryCode,subStatus,indexType,page,pageSize,fn) {
      this.FnAxiosAjax('post','/api/indexcategory/querybyindustrycode',{industryCode,subStatus,indexType,page,pageSize},function (data) {
        !! fn && fn(data.results);
      })
    },
    /* 主材特征列表 */
    indexattrsubscription:function (attrdata,fn) {
      console.log(attrdata)
      this.FnAxiosAjax('post','/api/indexattrsubscription/list',attrdata,function(data) {
        !! fn && fn(data.results);
      })
    },
    //选中分类样式改变并切换内容
    bindClickIschooseIcon:function(e,specialtyCode,indexName){
      let _This = this;
      let eT = e.currentTarget;
      _This.svaespecialtyCode = specialtyCode;
      _This.indexName = indexName
      let childDom  = eT.parentNode.childNodes;
      _This.$refs.attrsubscriptionlist.scrollTo(0,0,false);
      /*console.log(eT.parentNode.childNodes);*/
      for(let i = 0;i < childDom.length;i++){
        childDom[i].classList.remove('chooseIconActive');//先删除所有含有active 类名
      }
      eT.classList.add('chooseIconActive');//单独添加active 类名
      let dataSubscription = {
        specialtyCode:specialtyCode,
        indexType:null,
        page:1,
        pageSize:10,
        category:true,
        kw:null,
      }
      _This.indexattrsubscription(dataSubscription,function (data) {
        _This.indexattrsubscriptionList = data;
      })
    },
    //上拉加载更多数据
    infinite(done) {
      let _This = this;
      if(this.noData) {
        setTimeout(() => {
          _This.$refs.attrsubscriptionlist.finishInfinite(2);
        })
        return;
      }
      _This.attrsubscriptionListPage =  _This.attrsubscriptionListPage + 1;
      setTimeout(() => {
        let indexData = {
          specialtyCode:_This.specialtyCode,
          indexType:null,
          page:_This.attrsubscriptionListPage,
          pageSize:10,
          category:true,
          kw:null,
        }

        _This.indexattrsubscription(indexData,function (data) {
          if(data=='' || data == null){
            done(true);//没有更多数据
            /*this.noData = ''*/
          }else {
            done();
          }
          if(_This.indexattrsubscriptionList == ''){
            _This.indexattrsubscriptionList = data;
          }else {
            for(let key in data){
              _This.indexattrsubscriptionList.push(data[key]);
            }
          }
        })
      }, 500)
    },
    /*弹窗保存事件*/
    hide:function(target,e){
      /*hide(target);*/
      let eT = e.currentTarget;
      let _This = this;
      let FeaturesSaveData = {
        specialtyCode:this.svaespecialtyCode,
      }
      let needChoosed = eT.parentNode.children[0].children[1].children[1].children;
      let needChoosedArray = [];
      //必选特征
      for(let i = 0;i < needChoosed.length; i++){
        needChoosedArray.push({
          attrValue:needChoosed[i].children[1].children[0].value,
          attrId:needChoosed[i].children[1].children[0].getAttribute('data-attrid')
        });
      }
      //可选特征
      let KeChoosed = eT.parentNode.children[0].children[3].children;

      for(let i = 0;i < KeChoosed.length; i++){
        /*        console.log(KeChoosed[i].children[2].children[0])*/
        if(KeChoosed[i].className.indexOf('cur') > -1){
          needChoosedArray.push({
            attrValue:KeChoosed[i].children[2].children[0].value,
            attrId:KeChoosed[i].children[2].children[0].getAttribute('data-attrid')
          });
        }
      }
      // 处理为后台需要的格式
      for(let i = 0; i < needChoosedArray.length; i++ ){
        FeaturesSaveData["indexAttrSubList["+ i + "].attrValue"] = needChoosedArray[i].attrValue;
        FeaturesSaveData["indexAttrSubList["+ i + "].attrId"] = needChoosedArray[i].attrId;
      }
      console.log(needChoosedArray)
      if(needChoosedArray.length == 0){
        _This.fangerroring = true;
        _This.fangerrorText = '请选择您关注的特征';
        _This.setTimeoutError();
        return;
      }

      _This.SaveFeatures(FeaturesSaveData,function (data) {
        _This.fangerroring = true;
        _This.fangerrorText = data.msg;
        _This.setTimeoutError();
        hide(target);
      })
    },
    /*
    * 特征属性列表-已完成
      简要描述：
      获取指标下面属性信息
      请求URL：
      /api/indexattr/list
      请求方式：
      POST
      参数：
      参数名	必选	类型	说明
      specialtyCode	是	string	指标编码
      page	是	int	分页页数
      pageSize	是	int	分页条数
    *
    * */
    getIndexAttrList:function(specialtyCode,page,pageSize,fn){
      this.FnAxiosAjax('post','/api/indexattr/list',{specialtyCode,page,pageSize},function (data) {
        !! fn && fn(data.results);
      })
    },
    /*
    * 保存我的指标特征-已完成
      简要描述：
      保存我的指标特征
      请求URL：
      /api/indexsub/saveFeatures
      请求方式：
      POST
      参数：
      参数名	必选	类型	说明
      specialtyCode	是	string	专业
      indexAttrSubList[0].attrId	是	int	特征id
      indexAttrSubList[0].attrValue	是	string	特征值
    *
    * */
    SaveFeatures:function(indexAttrSubList,fn){
      this.FnAxiosAjax('post','/api/indexsub/saveFeatures',indexAttrSubList,function (data) {
        !! fn && fn(data.results);
      })
    },
    //弹窗里面选择关注特征
    bindClickVerticalChoose:function(e){
      let eT = e.currentTarget;
      let ClassL =  eT.classList;
      let IsHasClass = eT.classList[ClassL.length-1];
      eT.parentNode.classList.add('cur');
      eT.classList.add('cur');
      if(IsHasClass == 'cur'){
        eT.classList.remove('cur');
        eT.parentNode.classList.remove('cur');
      }
    },
    //删除特征
    delData:function (index) {
      let _This = this;
      _This.FangLoading = true;
      console.log(_This.indexattrsubscriptionList[index].id);
      this.axios({
        method: 'post',
        url: ApiUrl() + '/api/indexattrsubscription/deletebyids',
        params: {
          id:_This.indexattrsubscriptionList[index].id
        }
      }).then(function (response) {
        mui.confirm('确定要删除我吗？','提示',['确定','取消'],function (e) {   //提示弹窗
          if(e.index == 0){  //按钮下标
            _This.indexattrsubscriptionList.splice(index,1);   //删除
          }else {
            return
          }
        })
        _This.FangLoading = false;
      }).catch(function (error) {
        console.log(error);
        _This.FangLoading = false;
      });
    },
    /*
    * 保存我的指标特征-已完成
      简要描述：
      保存我的指标特征
      请求URL：
      /api/indexsub/saveFeatures
      请求方式：
      POST
      参数：
      参数名	必选	类型	说明
      specialtyCode	是	string	专业
      indexAttrSubList[0].attrId	是	int	特征id
      indexAttrSubList[0].attrValue	是	string	特征值
    *
    * */
    SaveFeatures:function(indexAttrSubList,fn){
      this.FnAxiosAjax('post','/api/indexsub/saveFeatures',indexAttrSubList,function (data) {
        !! fn && fn(data);
      })
    },
    /*
    * 查询用户是否关注过指定指标分类
    简要描述：
    查询用户是否关注过该指标分类
    请求URL：
    /api/indexcategory/getSubStatus
    请求方式：
    POST
    参数：
    参数名	必选	类型	说明
    specialtyCode	是	string	专业编码
    indexCode	否	string	指标编码
    * */
    getIndexCategorySubStatus:function (indexCategorySubStatus,fn) {
      this.FnAxiosAjax('post','/api/indexcategory/getSubStatus',indexCategorySubStatus,function (data) {
        !! fn && fn(data.results);
      })
    },

  }

}

